import React, { Component } from "react";
import { Route } from "react-router-dom";

import { TabBar } from "antd-mobile";

import Index from "../Index";
import SearchHouse from "../SearchHouse";
import News from "../News";
import Profile from "../Profile";

// TabBarItem数据
const tabbaritems = [
    {
        title: "首页",
        icon: "iconfont icon-home",
        path: "/home",
    },
    {
        title: "找房",
        icon: "iconfont icon-search",
        path: "/home/searchhouse",
    },
    {
        title: "资讯",
        icon: "iconfont icon-menu",
        path: "/home/news",
    },
    {
        title: "我的",
        icon: "iconfont icon-nickname",
        path: "/home/profile",
    },
];
// Home组件
export default class Home extends Component {
    state = {
        selectedTab: this.props.location.pathname,
    };
    // 渲染TabBar.item
    reanderTabBarItem = () => {
        return tabbaritems.map((item) => (
            <TabBar.Item
                title={item.title}
                key={item.title}
                icon={
                    <div
                        style={{
                            width: "22px",
                            height: "22px",
                        }}
                    >
                        <i className={item.icon} style={{ fontSize: 22 }}></i>
                    </div>
                }
                selectedIcon={
                    <div
                        style={{
                            width: "22px",
                            height: "22px",
                        }}
                    >
                        <i className={item.icon} style={{ fontSize: 22 }}></i>
                    </div>
                }
                selected={this.state.selectedTab === item.path}
                onPress={() => {
                    this.setState({
                        selectedTab: item.path,
                    });
                    this.props.history.push(item.path);
                }}
            />
        ));
    };
    componentDidUpdate(prevProps) {
        if (prevProps.location.pathname !== this.props.location.pathname) {
            this.setState({ selectedTab: this.props.location.pathname })
        }
    }
    render() {
        return (
            <div className="home">
                <Route exact path="/home" component={Index}></Route>
                <Route path="/home/searchhouse" component={SearchHouse}></Route>
                <Route path="/home/news" component={News}></Route>
                <Route path="/home/profile" component={Profile}></Route>

                {/* TabBar  */}
                <div style={{ position: "fixed", width: "100%", bottom: "0" }}>
                    <TabBar
                        noRenderContent
                        unselectedTintColor="#888"
                        tintColor="#21b97a"
                        barTintColor="white"
                    >
                        {this.reanderTabBarItem()}
                    </TabBar>
                </div>
            </div>
        );
    }
}
